<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      title="选择优惠券商品"
      :close-on-click-modal="false"
      :visible.sync="visible"
      width="80%"
      :modal="false">
      <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
               v-loading="dataListLoading"
               label-width="100px">
        <el-row :gutter="20">
          <!-- <el-col :span="7">
            <el-form-item label="一级分类" prop="">
              <el-select v-model="selectParentClass" filterable placeholder="请选择" value="selectParentClass" @change="selectSubClass=''">
                <el-option :value="-1" :key="-1" label="请选择"></el-option>
                <el-option
                  v-for="(item,index) in classList"
                  :key="index"
                  :label="item.className"
                  :value="index">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="7">
            <el-form-item label="二级分类" prop="" v-if="selectParentClass !== -1">
              <el-select v-model="selectSubClass" filterable placeholder="请选择" value="selectSubClass" >
                <el-option
                  v-for="item in (classList[selectParentClass].subGoodsClassList)"
                  :key="item.id"
                  :label="item.className"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="5">
            <el-form-item label="商品名称" prop="">
              <el-input v-model="dataForm.key" placeholder="商品名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-button @click="dataForm.key = ''
              selectSubClass = ''
              getGoodsList()">重置</el-button>
            <el-button @click="pageIndex = 1
            getGoodsList()" plain type="primary">查询</el-button>
          </el-col>
        </el-row>
        <br/>
        <el-row :gutter="20">
          <el-col :span="3" v-for="(item,index) in this.goodsList" style="padding-bottom: 20px;" :key="index">
              <el-card :body-style="{ padding: '0px' }" class="el-card is-hover-shadow">
                <img :src="item.img" class="image">
                <div style="padding: 14px;">
                  <span class="characters">{{item.goodsName}}</span>
                  <span>商城售价：{{item.vipPrice}}</span><br/>
                  <span>积分价：{{item.integral}}</span>
                  <div class="bottom clearfix">
                  <span v-if="selectedGoods.length <= 0">
                    <el-button type="text" style="float: right" @click="addGoods(item, true)">选择</el-button>
                  </span>
                  <span v-if="selectedGoods.length === 1">
                    <el-button v-if="selectedGoods[0].id === item.id" type="text" style="float: right; color: #c8c9cc" @click="addGoods(item, false)">已选择</el-button>
                  </span>
                  <span v-if="selectedGoods.length === 1">
                    <el-button v-if="selectedGoods[0].id !== item.id" type="text" style="float: right; color: #c8c9cc" @click="addGoods(item, true)">选择</el-button>
                  </span>
                  <span v-if="selectedGoods.length === 2">
                    <el-button v-if="selectedGoods[0].id === item.id || selectedGoods[1].id === item.id" type="text" style="float: right; color: #c8c9cc" @click="addGoods(item, false)">已选择</el-button>
                  </span>
                  <span v-if="selectedGoods.length === 2">
                    <el-button v-if="selectedGoods[0].id !== item.id && selectedGoods[1].id !== item.id" type="text" style="float: right; color: #c8c9cc" @click="addGoods(item, true)">选择</el-button>
                  </span>
                  <span v-if="selectedGoods.length === 3">
                    <el-button v-if="selectedGoods[0].id === item.id || selectedGoods[1].id === item.id || selectedGoods[2].id === item.id" type="text" style="float: right; color: #c8c9cc" @click="addGoods(item, false)">已选择</el-button>
                  </span>
                  <span v-if="selectedGoods.length === 3">
                    <el-button v-if="selectedGoods[0].id !== item.id && selectedGoods[1].id !== item.id && selectedGoods[2].id !== item.id" type="text" style="float: right; color: #c8c9cc" @click="addGoods(item, true)">选择</el-button>
                  </span>
                  <!-- <span v-for="ye in selectedGoods" :key="ye">
                    <el-button type="text" v-if="ye.id === item.id" style="float: right; color: #c8c9cc" @click="addGoods(item, false)">已选择</el-button>
                  </span> -->
                    <!-- <el-button type="text" :val="item.id"  v-if="optGoodsArray.indexOf(item.id) === -1" class="button" @click="optGoodsHandle(true,item.id,index,item.priceType === 1, item.giveIntegralType)">选择</el-button>
                    <el-button style="color: #c8c9cc" type="text"  v-if="optGoodsArray.indexOf(item.id) !== -1"  class="button" @click="optGoodsHandle(false,item.id)">已选择</el-button> -->
                  </div>
                </div>
              </el-card>
            </el-badge>
          </el-col>
        </el-row>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[16]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>

    <!-- <specs-add-or-update v-if="dialogVisible" ref="specsAddOrUpdate" @refreshDataList="init" @info="addSelectSpecs" ></specs-add-or-update> -->
  </div>
</template>

<script>
//   import SpecsAddOrUpdate from './add-whole-point-spec'
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          scopeOfApplication: '',
          intendedFor: '',
          key: ''
        },
        selectedGoods: [],
        goodsList: [],
        pageIndex: 0,
        pageSize: 16,
        totalPage: 0,
        dataListLoading: false,
        dialogVisible: false
      }
    },
    // components: {
    //   SpecsAddOrUpdate
    // },
    methods: {
      // 添加选中规格信息
    //   addSelectSpecs: function (id, info, activityGoodsInventoryDetail, maxCostingPrice, minVipPrice, goodsIntegral, integral, activityPrice, goodsInventoryNum) {
    //     debugger
    //     this.dataForm.integral = integral
    //     this.dataForm.activityPrice = activityPrice
    //     this.optGoods[id] = {
    //       'specs': info,
    //       'goodsName': this.goodsList[this.selectGoodsIndex].name,
    //       'goodsImg': this.goodsList[this.selectGoodsIndex].img,
    //       // 活动赠券
    //       'sendIntegral': goodsIntegral,
    //       'goodsIntegral': integral || null,
    //       'activityGoodsInventoryDetail': activityGoodsInventoryDetail,
    //       'goodsCostingPrice': maxCostingPrice,
    //       'minPrice': activityPrice,
    //       'goodsPrice': minVipPrice,
    //       'goodsInventory': goodsInventoryNum,
    //       'activityPrice': activityPrice
    //     }
    //     this.optGoodsArray.push(id)
    //   },
      init (scopeOfApplication, intendedFor, goodsList) {
        this.visible = true
        this.goodsList = goodsList
        this.dataForm.scopeOfApplication = scopeOfApplication
        this.dataForm.intendedFor = intendedFor
    //     // 请求分类
    //     this.$http({
    //       url: this.$http.adornUrl(`/activity/goods/queryClassList`),
    //       method: 'get',
    //       params: this.$http.adornParams()
    //     }).then(({data}) => {
    //       if (data && data.code === 0) {
    //         this.classList = data.data
    //       }
    //     })
        this.getGoodsList()
        
      },
      getGoodsList () {
        // this.dataListLoading = true
        // 请求商品列表
        // this.$http({
        //   url: this.$http.adornUrl(`/activity/goods/queryGoodsList`),
        //   method: 'get',
        //   params: this.$http.adornParams({
        //     'page': this.pageIndex - 1,
        //     'limit': this.pageSize,
        //     'key': this.dataForm.key
        //   })
        // }).then(({data}) => {
        //   if (data && data.code === 0) {
        //     this.goodsList = data.data.list
        //     this.totalPage = data.data.totalCount
        //   } else {
        //     this.dataList = []
        //     this.totalPage = 0
        //   }
        //   this.dataListLoading = false
        // })
        this.$http({
          url: this.$http.adornUrl(`/shopping/coupon/queryGoodsByTypeOrId`),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'keywords': this.dataForm.key,
            'scopeOfApplication': this.dataForm.scopeOfApplication,
            'intendedFor': this.dataForm.intendedFor
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.goodsList = data.data.list
            this.totalPage = data.data.totalCount
          } else {
            this.goodsList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$emit('info', this.selectedGoods)
        this.visible = false
        // console.log(this.dataForm.activityPrice)
        // this.visible = false
        // this.dataListLoading = true
        // this.$refs['dataForm'].validate((valid) => {
        //   if (valid) {
        //     let json = JSON.stringify(this.optGoods)
        //     this.$http({
        //       url: this.$http.adornUrl(`/activity/spikeGoods/add`),
        //       method: 'post',
        //       data: this.$http.adornData({
        //         'id': this.dataForm.id || undefined,
        //         'activityId': this.dataForm.id,
        //         'optGoods': json,
        //         'state': this.dataForm.state,
        //         'goodsIntegral': this.dataForm.integral
        //       })
        //     }).then(({data}) => {
        //       if (data && data.code === 0) {
        //         this.$message({
        //           message: '操作成功',
        //           type: 'success',
        //           duration: 1500,
        //           onClose: () => {
        //             this.visible = false
        //             this.$emit('refreshDataList')
        //           }
        //         })
        //       } else {
        //         this.$message.error(data.msg)
        //       }
        //       this.dataListLoading = false
        //     })
        //   }
        // })
      },
      addGoods (info, type) {
        if (type) {
          // 选择
          if (this.selectedGoods.length >= 3) {
              this.$message.error('最多只能选择3个商品！')
              return
          }
          this.selectedGoods.push({id: info.id, vipPrice: info.vipPrice, integral: info.integral, img: info.img, goodsName: info.goodsName})
        } else {
          // 取消选择
          let index;
          debugger
          for (var i = 0; i < this.selectedGoods.length; i++) {
              if (info.id === this.selectedGoods[i].id) {
                index = i;
                this.selectedGoods.splice(index, 1)
                return
              }
          }
        }
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.init(null)
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        // this.init(null)
        this.getGoodsList()
      },
      // 选择商品
      optGoodsHandle: function (flag, id, index, goodsType, giveIntegralType) {
        if (flag) { // 添加
          // 存储选中的商品的索引
          this.selectGoodsIndex = index
          
        } else { // 删除
          // this.optGoods.splice(Object.keys(this.optGoods).indexOf(id.toString()), 1)
          delete this.optGoods[id]
          this.optGoodsArray.splice(this.optGoodsArray.indexOf(id), 1)
        }
      }
    }
  }
</script>
<style>
  .characters{
    max-width: 130px;
    display:inline-block;
    width:150px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
    height: 100px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .sku img{
    max-width: 80px;
  }

  .sku {
    display: -webkit-box;
  }
  .sku s{
    font-size: 10px;
    color: #b5b2b2;
    padding-left: 15px;
  }

  .sku .sub-title{
    color: #b5b2b2;
    font-size: 10px;
  }
  .specs{
    padding-top: 20px;
  }
  .sku .price{
    padding-left: 10px;
  }
  .el-badge__content{
    margin-right: 60px;
  }
  .el-badge__content.is-fixed {
    right: 0px !important;
  }
</style>
